import { createBrowserRouter } from 'react-router-dom';
import { lazy, Suspense } from 'react';
import {
    Settings as SettingsIcon,
    People as TeamIcon,
    FileDownload as ExportIcon,
    School as SchoolIcon,
    CloudUpload as ImportIcon
} from '@mui/icons-material';
import { CircularProgress, Box } from '@mui/material';

import MainLayout from '../layouts/MainLayout';

import PrivateRoute from '../components/PrivateRoute';
import PermissionRoute from '../components/PermissionRoute';
import { AccessRole } from '../contexts/PermissionContext';

const Login = lazy(() => import('../pages/Login/login'));
const Student = lazy(() => import('../pages/Student/Student'));
const Permission = lazy(() => import('../pages/Permission'));
const StudentDetail = lazy(() => import('../pages/StudentDetail'));
const ExportManagement = lazy(() => import('../pages/ExportManagement'));
const ImportManagement = lazy(() => import('../pages/ImportManagement'));
const SchoolRecommendation = lazy(() => import('../pages/SchoolRecommendation'));
const NotFound = lazy(() => import('../pages/NotFound/NotFound'));

// 加载中的组件
const LoadingComponent = () => (
    <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
        <CircularProgress />
    </Box>
);

const router = createBrowserRouter([
    {
        path: '/',
        element: (
            <PrivateRoute>
                <MainLayout />
            </PrivateRoute>
        ),
        children: [
            {
                index: true,
                element: (
                    <Suspense fallback={<LoadingComponent />}>
                        <Student />
                    </Suspense>
                ),
                handle: {
                    title: '首页',
                    icon: <TeamIcon />
                }
            },
            {
                path: 'student',
                element: (
                    <Suspense fallback={<LoadingComponent />}>
                        <Student />
                    </Suspense>
                ),
                handle: {
                    title: '学生信息',
                    icon: <TeamIcon />
                }
            },
            {
                path: 'student/:record_id/:sid',
                element: (
                    <Suspense fallback={<LoadingComponent />}>
                        <StudentDetail />
                    </Suspense>
                ),
                handle: {
                    title: '学生详情',
                    icon: <TeamIcon />
                }
            },
            {
                path: 'permission',
                element: (
                    <Suspense fallback={<LoadingComponent />}>
                        <PermissionRoute requiredRole={AccessRole.Admin} requirePermissionAccess>
                            <Permission />
                        </PermissionRoute>
                    </Suspense>
                ),
                handle: {
                    title: '权限管理',
                    icon: <SettingsIcon />,
                    requiredRole: AccessRole.Admin
                }
            },
            {
                path: 'export',
                element: (
                    <Suspense fallback={<LoadingComponent />}>
                        <PermissionRoute requiredRole={[AccessRole.Admin, AccessRole.Advisor]} requireExportAccess>
                            <ExportManagement />
                        </PermissionRoute>
                    </Suspense>
                ),
                handle: {
                    title: '信息导出管理',
                    icon: <ExportIcon />,
                    requiredRole: [AccessRole.Admin, AccessRole.Advisor]
                }
            },
            {
                path: 'import',
                element: (
                    <Suspense fallback={<LoadingComponent />}>
                        <PermissionRoute requiredRole={[AccessRole.Admin, AccessRole.Advisor]} requireImportAccess>
                            <ImportManagement />
                        </PermissionRoute>
                    </Suspense>
                ),
                handle: {
                    title: '信息导入管理',
                    icon: <ImportIcon />,
                    requiredRole: [AccessRole.Admin, AccessRole.Advisor]
                }
            },
            {
                path: 'school-recommendation',
                element: (
                    <Suspense fallback={<LoadingComponent />}>
                        <SchoolRecommendation />
                    </Suspense>
                ),
                handle: {
                    title: '选校推荐',
                    icon: <SchoolIcon />
                }
            }
        ]
    },
    {
        path: '/login',
        element: (
            <Suspense fallback={<LoadingComponent />}>
                <Login />
            </Suspense>
        )
    },
    {
        path: '*',
        element: (
            <Suspense fallback={<LoadingComponent />}>
                <NotFound />
            </Suspense>
        )
    }
]);

export default router;
